<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>wSlide滑动菜单</title>
<style>
.left{width:200px;}
.left ul#menu li{list-style:inside;color:red;margin-left:15px;height:30px;line-height:30px;}
.left ul#menu div{height:30px;line-height:30px;margin-left:30px;}
#slide{width:188px;border:1px solid #c6c3c3}
#slide li{list-style:none}
#slide .slide-menu{width:176px;height:30px;border:1px solid #FFF;background-image:url(../images/comm/index_left-rectbar.png);
					background-repeat:repeat-x;border-bottom:1px solid #c6c3c3;line-height:30px;font-size:14px;font-weight:bold;
					padding-left:10px;cursor:pointer;
				}
				
#slide .slide-content{width:185px;border:1px solid #FFF;background-color:#FFF;border-bottom:1px solid #c6c3c3;}
ul,li{margin:0;padding:0;}

</style>
</head>

<body>
<div class="left">
    	<div id="list" class="fl">
    		<ul id="slide">
    			<li>
    				<div class="slide-menu">应用</div>
    				<div class="slide-content">
    					<ul id="menu">
    						<li>交易订单</li>
    						<div>&gt;卖家企业订单</div>
    						<div>&gt;买家企业订单</div>
    						<li>商品管理</li>
    						<div>&gt;企业商品管理</div>
    						<div>&gt;申请发布商品</div>
    						<div>&gt;申请商品挂牌</div>
    						<div>&gt;发布商品管理</div>
    					</ul>
    				</div>
    			</li>
    			<li>
    				<div class="slide-menu">用户管理</div>
    				<div class="slide-content">
    					<ul id="menu">
    						<div>&gt;企业信息管理</div>
    						<div>&gt;企业权限和认证</div>
    						<div>&gt;企业账户管理</div>
    					</ul>
    				</div>
    			</li>
    			<li>
    				<div class="slide-menu">货运管理</div>
    				<div class="slide-content">
    					<ul id="menu">
    						<div>&gt;货运服务管理</div>
    					</ul>
    				</div>
    			</li>    			
    			<li>
    				<div class="slide-menu">仓库管理</div>
    				<div class="slide-content">
    					<ul id="menu">
    						<div>&gt;仓库管理</div>
    					</ul>
    				</div>
    			</li>   
    			<li>
    				<div class="slide-menu">消息中心</div>
    				<div class="slide-content">
    					<ul id="menu">
    						<div>&gt;消息管理</div>
    					</ul>
    				</div>
    			</li> 
    		</ul>
    	</div>
</div>
</body>
</html>
<script src="jquery-1.8.0.min.js"></script>
<script>
/*
编写：邬畏畏
*/

var wSlide = function(JSON){
	/*
	JSON={status:'expand|close|0'}
	*/
	var dom , disp="";
	var parentHeight = ($($("#slide")[0].parentNode).height());
	var menuHeight = $("#slide .slide-menu").height();
	var contentHeight = parentHeight-menuHeight*2;
	$("#slide .slide-content").hide();
	/*$("#slide .slide-content").height(contentHeight);*/
	
	$("#slide .slide-menu").each(function(index){
		if(window.navigator.userAgent.indexOf("IE")>0)
		{
			dom = this.nextSibling;
		}
		else
		{
			dom = this.nextSibling.nextSibling;
		}
		disp = $(dom).css("display");
		if(JSON!=undefined&&JSON.status=="close")
		{
			$(dom).slideUp("normal");
		}
		else if(JSON!=undefined&&JSON.status=="expand")
		{
			$(dom).slideDown("normal");
		}
		else if(JSON!=undefined&&parseInt(JSON.status)==index)
		{
			$(dom).slideDown("normal");
		}
	});/*onload*/
	
	$("#slide .slide-menu").click(function(){
		if(window.navigator.userAgent.indexOf("IE")>0)
		{
			dom = this.nextSibling;
		}
		else
		{
			dom = this.nextSibling.nextSibling;
		}
		disp = $(dom).css("display");
		
		$("#slide .slide-menu").each(function(){
			if(disp=="block")
			{
				$(dom).slideUp("normal");
			}
		});
		if(disp=="none"||disp=="")
		{
			$(dom).slideDown("normal");
		}
	});
}

/*调用*/
wSlide({status:"expand"});
</script>
